$header-trigger-prefix-cls: '#{$namespace}-layout-header-trigger';
$header-prefix-cls: '#{$namespace}-layout-header';
$breadcrumb-prefix-cls: '#{$namespace}-layout-breadcrumb';
$logo-prefix-cls: '#{$namespace}-app-logo';

.#{$header-prefix-cls} {
  display: flex;
  height: $header-height !important;
  padding: 0 !important;
  margin-left: -1px;
  line-height: $header-height !important;
  // color: $white !important;
  // background-color: $white;
  align-items: center;
  justify-content: space-between;

  &--mobile {
    .#{$breadcrumb-prefix-cls},
    .error-action,
    .notify-item,
    .fullscreen-item {
      display: none;
    }

    .#{$logo-prefix-cls} {
      min-width: unset;
      padding-right: 0;

      &__title {
        display: none;
      }
    }
    .#{$header-trigger-prefix-cls} {
      padding: 0 4px 0 8px !important;
    }
    .#{$header-prefix-cls}-action {
      padding-right: 4px;
    }
  }

  &--fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: $layout-header-fixed-z-index;
    width: 100%;
  }

  &-logo {
    height: $header-height;
    min-width: 210px;
    font-size: 14px;

    img {
      width: 100%;
      height: 100%;
      // margin-right: 2px;
    }
  }

  &-left {
    display: flex;
    height: 100%;
    align-items: center;

    .#{$header-trigger-prefix-cls} {
      display: flex;
      height: 100%;
      padding: 1px 10px 0;
      cursor: pointer;
      align-items: center;

      .anticon {
        font-size: 16px;
      }

      &.light {
        &:hover {
          background-color: $header-light-bg-hover-color;
        }

        svg {
          fill: #000;
        }
      }

      &.dark {
        &:hover {
          background-color: $header-dark-bg-hover-color;
        }
      }
    }
  }

  &-menu {
    height: 100%;
    min-width: 0;
    flex: 1;
    align-items: center;
  }

  &-action {
    display: flex;
    min-width: 180px;
    align-items: center;

    &__item {
      display: flex !important;
      height: $header-height;
      padding: 0 2px;
      font-size: 1.2em;
      cursor: pointer;
      align-items: center;
      &.search-item,
      &.notify-item {
        span[role='img'] {
          padding: 22px 8px;
        }
      }
      .app-iconify {
          padding: 0 10px;
          font-size: 16px !important;
        }
      /* 定义keyframe动画，命名为twinkle */
      @keyframes twinkle {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 1;
        }
        50.01% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
      .twinkle {
        animation: twinkle 0.5s linear infinite;
      }
    }

    span[role='img'] {
      padding: 0 8px;
    }
    .icon-ym {
      font-size: 18px;
      padding: 0 6px;
      &.icon-ym-systemToggle {
        font-size: 19px;
      }
    }
  }
  
  

  // &--light {
  //   background-color: $white !important;
  //   border-bottom: 1px solid $header-light-bottom-border-color;
  //   border-left: 1px solid $header-light-bottom-border-color;
  //   color: $text-color-base !important;
  //   .#{$header-prefix-cls}-logo {
  //     color: $text-color-base;

  //     &:hover {
  //       background-color: $header-light-bg-hover-color;
  //     }
  //   }

  //   .#{$header-prefix-cls}-action {
  //     &__item {
  //       color: $text-color-base;
  //       &:hover {
  //         background-color: $header-light-bg-hover-color;
  //       }
  //     }

  //     &-icon,
  //     span[role='img'] {
  //       color: $text-color-base;
  //     }
  //   }
  // }

  // &--dark {
  //   background-color: $header-dark-bg-color !important;
  //   border-left: 1px solid $border-color-base;
  //   .#{$header-prefix-cls}-logo {
  //     &:hover {
  //       background-color: $header-dark-bg-hover-color;
  //     }
  //   }

  //   .#{$header-prefix-cls}-action {
  //     &__item {
  //       .ant-badge {
  //         span {
  //           color: $white;
  //         }
  //       }

  //       &:hover {
  //         background-color: $header-dark-bg-hover-color;
  //       }

  //     }
  //   }
  // }
}
// .#{$header-prefix-cls} {
  @include useThemeHeader(){
    background-color: var(--header-bg-color) !important;
    border-bottom: 1px solid getModeVar('headerBorderBottomColor');
    border-left: 1px solid getModeVar('headerBorderBottomColor');
    color: getModeVar('textColor') !important;
    .#{$header-prefix-cls}-logo {
      color: getModeVar('textColor');

      &:hover {
        background-color: getModeVar('headerBorderBottomColor');
      }
    }

    .#{$header-prefix-cls}-action {
      &__item {
        color: getModeVar('textColor');
        .ant-badge {
            span {
              color: getModeVar('textColor');
            }
          }
        &:hover {
          background-color: getModeVar(headerHoverBgColor);
        }
        &-icon,
        span[role='img'] {
          color: getModeVar('textColor');
        }
      }
    }
  }
// }